<template>
  <view class="overall">
    <view class="content">
      <view class="notice-bar">
        <view class="notice-icon"></view>
        <view>仅支持查询一年内的缴费记录</view>
      </view>
      <view class="switch">
        <view>
          <view>{{userInfo.nickname}}</view>
          <view>就诊人ID：{{userInfo.id}}</view>
        </view>
        <view>
          <view @click="exchanging" class="change-btn">切换就诊人</view>
          <view style="display: flex;align-items: center;">
            <view>花费总计：</view>
            <view style="color: #FF6010;">￥{{number}}.00</view>
          </view>
        </view>
      </view>
      
      <!-- 无数据提示 -->
      <view v-if="logItem.length === 0" class="empty-tip">
        <view class="empty-text">暂无内容</view>
      </view>

      <!-- 清单列表 -->
      <view class="manifest" v-for="(item, index) in logItem" :key="index" @click="details(item)">
        <view>
          <view>住院时间：{{item.create_time}}</view>
          <view style="display: flex;align-items: center;">
            <view style="margin-right: 20rpx;">￥{{item.money}}</view>
            <view class="arrow-right"></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 原生底部弹窗 -->
    <view v-if="showModal" class="modal-mask" @click="handleClose">
      <view class="modal-container">
        <view class="person">
          <view class="personTitle">
            <view>切换就诊人</view>
          </view>
          <view class="personItem" v-for="(item, index) in cardInfo" :key="index" @click.stop="substitution(item)">
            <view>{{item.nickname}}</view>
            <view>就诊ID号：{{item.id}}</view>
          </view>
          <view class="personBut">
            <view @click="manage(1)">添加就诊人</view>
            <view @click="manage(2)">管理就诊人</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import { card, billReport } from '@/api/index.js';

// 返回上一页
function handleClickLeft() {
  uni.navigateBack();
}

// 数据状态
const userInfo = ref({});
const cardInfo = ref([]);
const logItem = ref([]);
const number = ref(0);
const showModal = ref(false);

// 获取用户信息和账单数据
const fetchData = async () => {
  try {
    // 获取用户ID
    const res = await uni.getStorage({ key: 'user' });
    const userId = res.data?.data?.id;
    
    // 获取就诊人信息
    const cardRes = await card({ user_id: userId });
    cardInfo.value = cardRes.data || [];
    
    // 设置默认就诊人
    const defaultCard = cardInfo.value.find(item => item.status === 1);
    if (defaultCard) {
      userInfo.value = defaultCard;
    }
    
    // 获取账单数据
    const billRes = await billReport({ user_id: userId });
    logItem.value = billRes.data || [];
    
    // 计算总金额
    if (logItem.value.length > 0) {
      const sum = logItem.value.reduce((total, current) => 
        total + parseFloat(current.money || 0), 0);
      number.value = sum;
    }
  } catch (error) {
    console.error('获取数据失败:', error);
    uni.showToast({
      title: '获取数据失败，请稍后重试',
      icon: 'none'
    });
  }
};

// 初始化数据
onMounted(() => {
  fetchData();
});

// 显示切换就诊人弹窗
function exchanging() {
  fetchData(); // 刷新数据
  showModal.value = true;
}

// 关闭弹窗
function handleClose() {
  showModal.value = false;
}

// 选择就诊人
function substitution(item) {
  userInfo.value = item;
  handleClose();
}

// 查看详情
function details(item) {
  uni.setStorage({
    key: 'checklist',
    data: item,
    success: () => {
      console.log('数据存储成功');
      uni.navigateTo({
        url: '/pages/listDetails/listDetails'
      });
    }
  });
}

// 管理就诊人
function manage(index) {
  handleClose();
  if (index === 1) {
    uni.navigateTo({
      url: '/pages/founded/founded',
    });
  } else if (index === 2) {
    uni.navigateTo({
      url: '/pages/patient/patient',
    });
  }
}
</script>

<style scoped>
.overall {
  width: 100%;
  background-color: #F4F4F4;
  min-height: 100vh;
}

.title {
  width: 100%;
  height: 180rpx;
  background-color: #00DACA;
  color: white;
  display: flex;
  align-items: center;
}

.name {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 42rpx;
  margin-top: 50rpx;
  margin-left: 3%;
}

.name > view {
  margin-left: 20rpx;
}

/* 自定义图标 */
.arrow-left {
  width: 20rpx;
  height: 20rpx;
  border-left: 4rpx solid white;
  border-bottom: 4rpx solid white;
  transform: rotate(45deg);
}

.arrow-right {
  width: 18rpx;
  height: 18rpx;
  border-right: 4rpx solid #999;
  border-top: 4rpx solid #999;
  transform: rotate(45deg);
}

.notice-bar {
  width: 94%;
  padding: 20rpx 3%;
  background-color: #FFF9EA;
  color: #FF9800;
  display: flex;
  align-items: center;
}

.notice-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 15rpx;
  background-color: #FF9800;
  border-radius: 50%;
  position: relative;
}

.notice-icon::after {
  content: '!';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

.switch {
  width: 94%;
  height: 160rpx;
  padding: 0 3%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.switch > view:first-child > view:first-child {
  padding-bottom: 18rpx;
}

.switch > view:first-child > view:first-child {
  font-weight: bold;
  font-size: 38rpx;
}

.switch > view:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.change-btn {
  color: #40C5D3;
  border: 3rpx #40C5D3 solid;
  text-align: center;
  padding: 10rpx 20rpx;
  border-radius: 2000rpx;
  margin-bottom: 18rpx;
}

.manifest {
  width: 100%;
  background-color: white;
  margin-bottom: 1rpx;
}

.manifest > view {
  display: flex;
  width: 92%;
  height: 100rpx;
  align-items: center;
  margin-left: 4%;
  margin-right: 4%;
  justify-content: space-between;
}

/* 空状态提示 */
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150rpx;
}

.empty-icon {
  width: 120rpx;
  height: 120rpx;
  background-color: #E5E5E5;
  border-radius: 50%;
  margin-bottom: 30rpx;
}

.empty-text {
  color: #999;
  font-size: 32rpx;
}

/* 原生弹窗样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.modal-container {
  width: 100%;
  background-color: white;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.person {
  width: 100vw;
  padding-bottom: 2vh;
}

.personTitle {
  width: 100%;
  height: 100rpx;
  background-color: #00DACA;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 38rpx;
}

.personItem {
  width: 96%;
  padding: 30rpx 0%;
  margin: 0 2%;
  height: 100rpx;
  border-bottom: #C7C7C7 1rpx solid;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.personBut {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.personBut > view {
  width: 50%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #00A8BB;
  border-bottom: #C7C7C7 1rpx solid;
}
</style>